<template>
    <div class="container">
      <el-row>
        <el-form :inline="true">
          <el-form-item label="类型名称">
            <el-input v-model="queryInfo.name" placeholder="请输入收费分类类型"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="toAddArticle">新增类型</el-button>
          </el-form-item>
        </el-form>
      </el-row>
  
      <!-- 作用域插槽1 修改与增加使用 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancle">
        <el-form :model="fms">
          <el-form-item label="名称" label-width="80px">
            <el-input placeholder="请输入名称" v-model="fms.name"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancle">取消</el-button>
          <el-button type="primary" @click="addFm">确定</el-button>
        </div>
      </el-dialog>


      <!-- 作用域插槽2 查看相关联的全部数据 -->
      
<el-dialog :title="title" :visible.sync="dialogTableVisible" @close="cancle1">

    <el-table :data="chargeList">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="chargetype.name" label="收费类型">
        </el-table-column>
        <el-table-column prop="chargeprice" label="收费金额">
        </el-table-column>
        <el-table-column prop="countnumber" label="咨询单数">
        </el-table-column>
        <el-table-column prop="consult.name" label="咨询师名称">
        </el-table-column>
        
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-link type="primary" @click="deleteintable(scope.row.id)">删除文章</el-link>
          </template>
        </el-table-column>
      
    </el-table>

    <div class="block">
        <el-pagination
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
  </el-dialog>
  



      <div class="table">
        <el-table :data="articleTypeList" border style="width: 100%">
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="类型名称"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link type="primary" @click="toEditFm(scope.row)">编辑类型</el-link>&#12288;
              <el-link type="primary" @click="findAllRelative(scope.row.id)">查询相关所属</el-link>&#12288;
              <el-link type="primary" @click="deleteRow(scope.row.id)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum" :page-sizes="[2, 6, 8, 10]" :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </template>
  
<script>
export default {
    data() {
        return {
            queryInfo: {
              typeId: '',
          consult_id:'',
          consult_name: '',
          pageNum: 1,
          pageSize: 4
      },
      articlequeryInfo:{
        id:'',
        pageNum: 1,
        pageSize: 2
      },
      title:'',
      type_id:'',
      chargeList: [],
        chargeTypeList: [],
        consultList: [],
        articleTypeList:[],
        articleList:[],
      total:10,
      dialogFormVisible: false, // 是否显示对话框
      dialogTableVisible:false,
        fms: { // 文章对象
          "id": '',
          "name": ""
        },
        //消费对象
        charge: {
        "id":'',
        "chargeprice":'',
        "countnumber":'',
        "consultId": '', 
        "typeId": '', 
        "chargetype":{
            "id":'',
            "name":''
        },
        "consult":{
            "id":'',
            "name":''
        }
       
        }
    
    }
    },
    mounted() {
        this.queryList()
    },

    methods: {
      deleteintable(id){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.$http.get('http://10.10.18.137:8888/sfzy/charge/delete?id=' + id)
        .then(resp => {
          if (resp.data.status === 200) {
            this.$message.success(resp.data.message);
            this.querChargeList();
            this.queryList();
          } else {
            this.$message.error("无法删除，该数据被其他表引用，点击查看关联信息");
          }
        });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });
    });
      },
        cancle1(){

            this.dialogTableVisible = false;
            this.queryList();

        },
  // 插槽添加或修改
  addFm() {
    if (this.fms.id) { // 修改
      this.$http.put("http://10.10.18.137:8888/sfzy/chargetype/update", this.fms)
        .then(resp => {
          if (resp.data.status == 200) {
            this.$message.success('修改成功！');
            this.clearForm();
            this.queryList();
          } else {
            this.$message.error('接口异常！');
          }
        });
    } else { // 新增
      this.$http.post("http://10.10.18.137:8888/sfzy/chargetype/insert", this.fms)
        .then(resp => {
          if (resp.data.status == 200) {
            this.$message.success('添加成功！');
            this.clearForm();
            this.queryList();
          } else {
            this.$message.error('接口异常！');
          }
        });
    }
  },


  //查询关联表全部数据
  querArticleList(id){

 this.$http.get('http://10.10.18.137:8888/sfzy/chargetype/selectByForId?id='+id)
      .then(resp => {
        if (resp.data.status == 200) {
          this.articleTypeList = resp.data.data.list;
          this.total = resp.data.data.total;
        } else {
          this.$message.error('查询失败！');
        }
      });


  },

  clearForm() {
    this.fms = { id: '', name: '' };
    this.dialogFormVisible = false;
  },

  cancle() {
    this.clearForm();
  },
  findAllRelative(id) {
    this.queryInfo.typeId = id
    
    this.dialogTableVisible = true;
    this.querChargeList();  // 调用查询关联数据的函数
    this.title = "查看全部关联数据";
  
},


  toAddArticle() {
    this.title = "新增文章";
    this.dialogFormVisible = true;
  },

  toEditFm(row) {
    this.fms = { ...row };
    this.title = "修改";
    this.dialogFormVisible = true;
  },

  queryList() {
    this.$http.get('http://10.10.18.137:8888/sfzy/chargetype/selectAll', { params: this.queryInfo })
      .then(resp => {
        if (resp.data.status == 200) {
          this.articleTypeList = resp.data.data.list;
          this.total = resp.data.data.total;
        } else {
          this.$message.error('查询失败！');
        }
      });
  },

  handleSizeChange(size) {
    this.queryInfo.pageSize = size;
    this.queryList();
  },

  handleCurrentChange(num) {
    this.queryInfo.pageNum = num;
    this.queryList();
  },
 

  deleteRow(id) {
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.$http.get('http://10.10.18.137:8888/sfzy/chargetype/delete?id=' + id)
        .then(resp => {
          if (resp.data.status === 200) {
            this.$message.success(resp.data.message);
            this.queryList();
          } else {
            this.$message.error("无法删除，该数据被其他表引用，点击查看关联信息");
          }
        });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });
    });
  },

  search() {
    this.queryInfo.pageNum = 1;
    this.queryList();
  },
  querChargeList() {
    // 使用 queryInfo 中的 type_id 来查询特定收费类型的数据
    this.$http.get('charge/selectAll', { params: { ...this.queryInfo, type_id: this.queryInfo.type_id } })
        .then(resp => {
            if (resp.data.status === 200) {
                this.chargeList = resp.data.data.list;
                this.total = resp.data.data.total;
            } else {
                this.$message.error('查询失败！');
            }
        });
}
}

}
</script>
<style lang="css">
    
</style>